<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" label-width="120px" class="dataForm">
      <!--基础数据-->
      <div class="area-header">
        <span class="area-header-title">
          {{ $t('基础数据') }}
          <el-tooltip placement="top">
            <div slot="content">
              <span v-html="$t('1. 保存财务数据后，系统会将导入的科目值展示到此模块中；<br>')" />
              <span v-html="$t('2. 此模块中的指标值可修改。<br>')" />
            </div>
            <i class="el-icon-question" />
          </el-tooltip>
        </span>
      </div>
      <div style="display: flex;width: 100%;">
        <div style="width: 33%;" class="bs">
          <el-table
            :data="form.bsList"
            border
            class="bs"
            default-expand-all
          >
            <el-table-column :label="$t('资产负债表')" width="100%" align="center" prop="bs">
              <el-table-column :label="$t('科目名称')" align="left" prop="keyName">
                <template slot-scope="scope">
                  <span v-if="source !== 'temp'">{{ scope.row.keyName }}</span>
                  <span v-else><el-input v-model="scope.row.keyName" /></span>
                </template>
              </el-table-column>
              <el-table-column v-if="source !== 'temp'" :label="$t('值')" width="150" align="center" prop="keyValue">
                <template slot-scope="scope">
                  <Money v-model="scope.row.keyValue" unit="" />
                </template>
              </el-table-column>
              <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width" width="50">
                <template slot-scope="scope">
                  <el-button
                    v-hasPermi="['company:pcw:remove']"
                    size="small"
                    type="text"
                    icon="el-icon-close"
                    @click="deleteHandle(scope.$index,scope.row,'bs')"
                  />
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
        <div style="width: 33%;" class="pd">
          <el-table
            :data="form.pdList"
            border
            class="pd"
            default-expand-all
          >
            <el-table-column :label="$t('利润表')" width="100%" align="center" prop="pd">
              <el-table-column :label="$t('科目名称')" align="left" prop="keyName">
                <template slot-scope="scope">
                  <span v-if="source !== 'temp'">{{ scope.row.keyName }}</span>
                  <span v-else><el-input v-model="scope.row.keyName" /></span>
                </template>
              </el-table-column>
              <el-table-column v-if="source !== 'temp'" :label="$t('值')" width="150" align="center" prop="keyValue">
                <template slot-scope="scope">
                  <Money v-model="scope.row.keyValue" />
                </template>
              </el-table-column>
              <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width" width="50">
                <template slot-scope="scope">
                  <el-button
                    v-hasPermi="['company:pcw:remove']"
                    size="small"
                    type="text"
                    icon="el-icon-close"
                    @click="deleteHandle(scope.$index,scope.row,'pd')"
                  />
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
        <div style="width: 33%;" class="cf">
          <el-table
            :data="form.cfList"
            border
            class="cf"
            default-expand-all
          >
            <el-table-column :label="$t('现金流量表')" width="100%" align="center" prop="cf">
              <el-table-column :label="$t('科目名称')" align="left" prop="keyName">
                <template slot-scope="scope">
                  <span v-if="source !== 'temp'">{{ scope.row.keyName }}</span>
                  <span v-else><el-input v-model="scope.row.keyName" /></span>
                </template>
              </el-table-column>
              <el-table-column v-if="source !== 'temp'" :label="$t('值')" width="150" align="center" prop="keyValue">
                <template slot-scope="scope">
                  <Money v-model="scope.row.keyValue" unit="" />
                </template>
              </el-table-column>
              <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width" width="50">
                <template slot-scope="scope">
                  <el-button
                    v-hasPermi="['company:pcw:remove']"
                    size="small"
                    type="text"
                    icon="el-icon-close"
                    @click="deleteHandle(scope.$index,scope.row,'cf')"
                  />
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
      <!--保存，保存并启动流程，取消 三个按钮-->
      <el-button @click="cancel">{{ $t("取消") }}</el-button>
      <el-button v-hasPermi="['company:pcw:edit']" type="primary" @click="submitForm">{{ $t('确认') }}</el-button>
    </div>
  </div>
</template>

<script>
    export default {
        data() {
            return {
                // 表单参数
                form: {
                  cfList: [],
                  pdList: [],
                  bsList: []
                },
                // 遮罩层
                loading: false,
                // 判断来源 temp: 系统模板，去掉keyValue列， cmy: 公司财务数据
                source: 'temp'
            }
        },
        methods: {
          // 取消按钮
          cancel() {
            this.$parent.$parent.$parent.ocrFormOpen = false
            this.$parent.$parent.$parent.ocrFileList = []
            this.$parent.$parent.$parent.ocrFileAtt = undefined
          },
          deleteHandle(index, row, type) {
            this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
              confirmButtonText: this.$t('确定'),
              cancelButtonText: this.$t('取消'),
              type: 'warning'
            }).then(function() {
                return true
            }).then(() => {
              if (type === 'bs') {
                this.form.bsList.splice(index, 1)
              } else if (type === 'cf') {
                this.form.cfList.splice(index, 1)
              } else if (type === 'pd') {
                this.form.pdList.splice(index, 1)
              }
              return this.msgSuccess(this.$t('删除成功'))
            }).catch(function() {})
          },
          /** 提交按钮 */
          submitForm: function() {
            this.$refs['form'].validate(valid => {
              if (valid) {
                if (this.form.bsList !== null && this.form.bsList.length > 0) {
                  this.$parent.$parent.$parent.$parent.$parent.form.bsList = this.form.bsList
                }
                if (this.form.cfList !== null && this.form.cfList.length > 0) {
                  this.$parent.$parent.$parent.$parent.$parent.form.cfList = this.form.cfList
                }
                if (this.form.pdList !== null && this.form.pdList.length > 0) {
                  this.$parent.$parent.$parent.$parent.$parent.form.pdList = this.form.pdList
                }
                // 关闭form页面
                this.$parent.$parent.$parent.ocrFormOpen = false

                // 判断来源，如果是公司模版
                if (this.source === 'temp') {
                  this.$parent.$parent.$parent.$parent.$parent.uploadFormOpen = false
                  this.$parent.$parent.$parent.$parent.$parent.saveOcrResult()
                }
              }
            })
          }
        }
    }
</script>
